import React from 'react'
import { Layout } from 'antd';
import { connect } from 'react-redux'
import { Menu, Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { logoutAction } from '../../redux/actionCreator/user'

const { Header } = Layout;

function MyHeader(props) {


  const menu = (
    <Menu
      items={[
        // {
        //   label: (
        //     <span target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        //       1st menu item
        //     </span>
        //   ),
        // },
        {
          danger: true,
          label: (
            <div onClick={() => logout()}>退出</div>
          ),
        },
      ]}
    />
  );

  const logout = () => {
    props.logoutAction()
  }

  return (
    <Header
      className="site-layout-background"
      style={{
        padding: '0 20px',
        background: '#fff',
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'center'
      }}
    >
      <Dropdown overlay={menu}>
        <span onClick={e => e.preventDefault()}>
          <Space>
            {props.user.username}
            <DownOutlined />
          </Space>
        </span>
      </Dropdown>
    </Header>
  )
}

const mapStateToProps = (state) => {
  console.log(state)
  return {
    user: state.userReducer
  }
}

const mapDispatchToProps = {
  logoutAction
}

export default connect(mapStateToProps, mapDispatchToProps)(MyHeader)
